<template>
	<view class="">
		<view class="ubox">
			<u-swiper :list="arr1" height="475" mode="round" @click="chakantu"></u-swiper>
		</view>
		<view class="name">
			海南千禧圣女果小西红柿约1kg新鲜水果
		</view>
		<view class="datajifen">
			1200
			<text>积分</text>
		</view>
		<view class="yiduihuan">
			已兑换：2493
		</view>
		<view class="hr"></view>
		<view class="caozuo">
			<view class="xuanzhe">
				选择
			</view>
			<view class="right">
				<view class="rightname">
					请选择商品规格
				</view>
				<image
					src="http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210726/eb5d2f434f094ebdab705c7f3aae29be.png"
					mode=""></image>
			</view>
		</view>
		<view class="hr"></view>
		<view class="caozuo">
			<view class="xuanzhe">
				商品参数
			</view>
			<view class="right">
				<view class="rightname">
					查看
				</view>
				<image
					src="http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210726/eb5d2f434f094ebdab705c7f3aae29be.png"
					mode=""></image>
			</view>
		</view>
		<view class="hr"></view>
		<view class="spb">
			<view class="sp">
				商品详情
			</view>
		</view>
		<view class="duihuan">
			立即兑换
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				arr1: [
					"http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210726/8b231c0bad90c88ec8b68b95a7be1fc9.jpg",
					"http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210726/8b231c0bad90c88ec8b68b95a7be1fc9.jpg"
				],
			}
		},
		methods: {
			chakantu(e) {
				let imgs = this.arr1
				uni.previewImage({
					urls: imgs,
					current: e
				})
			}
		},
		onLoad() {

		}
	}
</script>

<style scoped lang="less">
	.ubox {
		position: relative;

		.swiperbox {
			width: 100%;
			height: 475rpx;
		}
	}

	.name {
		font-family: MicrosoftYaHei-Bold;
		font-size: 36rpx;
		color: #000000;
		font-weight: 700;
		margin-top: 51rpx;
		margin-left: 21rpx;
	}

	.datajifen {
		font-family: PingFang-SC-Medium;
		font-size: 48rpx;
		color: #ef0000;
		margin-left: 19rpx;
		margin-top: 9rpx;

		text {
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			color: #ef0000;
			margin-left: 10rpx;
		}
	}

	.yiduihuan {
		font-family: PingFang-SC-Medium;
		font-size: 24rpx;
		color: #999999;
		margin-left: 19rpx;
		margin-top: 14rpx;
		margin-bottom: 10rpx;
	}

	.hr {
		height: 23rpx;
		background-color: rgb(233, 233, 233);
	}

	.caozuo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.xuanzhe {
			font-family: MicrosoftYaHei-Bold;
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
		}

		.right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #000000;

			image {
				width: 17rpx;
				height: 29rpx;
				margin-left: 30rpx;
			}
		}
	}

	.spb {
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		font-family: MicrosoftYaHei-Bold;
		font-size: 28rpx;
		color: #000000;
		font-weight: 700;
	}

	.duihuan {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		background-color: #ef0000;
		font-family: MicrosoftYaHei;
		font-size: 28rpx;
		line-height: 100rpx;
		color: #ffffff;
		text-align: center;
	}
</style>
